<template>
  <div
    class="carousel-container"
    @mouseenter="stopAutoPlay"
    @mouseleave="startAutoPlay"
  >
    <div class="carousel-wrapper" ref="carouselWrapper">
      <div
        class="carousel-track"
        :style="{
          transform: `translateX(-${currentPosition}px)`,
          transition: transitionStyle,
        }"
      >
       <div class="carousel-item" v-for="(item, index) in items" :key="index">
          <div class="items" @click.stop="handleItemClick(item)" :title="item.featureName">
            <img
              :src="`/api/frontend/file/download/${item.fileId}`"
              class="item-image"
            />
            <div class="tiem-text">
              {{ item.featureName }}
            </div>
          </div>
        </div>
      </div>
      <div class="prev-btn" @click="prevPage" :disabled="!hasPrevPage">
        <i class="el-icon-arrow-left"></i>
      </div>
      <div class="next-btn" @click="nextPage" :disabled="!hasNextPage">
        <i class="el-icon-arrow-right"></i>
      </div>
    </div>
  </div>
</template>

<script>
import service from "@/service/service";

export default {
  name: "FourItemCarousel",
  props: {
   
    itemWidth: {
      type: Number,
      default: 355,
    },
    loop: {
      type: Boolean,
      default: false,
    },
    autoPlayInterval: {
      type: Number,
      default: 3000,
    },
  },
  data() {
    return {
      items:[],
      currentIndex: 0,
      isTransitioning: false,
      autoPlay: true,
      interval: null,
      currentPage: 1,
      pageSize: 100,
      homeContainer: null,
    };
  },
  computed: {
    currentPosition() {
      return this.currentIndex * this.itemWidth;
    },
    transitionStyle() {
      return this.isTransitioning ? "transform 0.5s ease" : "none";
    },
    hasNextPage() {
      if (this.loop) return true;
      return this.currentIndex + 4 < this.items.length;
    },
    hasPrevPage() {
      if (this.loop) return true;
      return this.currentIndex > 0;
    },
  },
  methods: {
  async  getHotTopic() {
        try {
        this.loading = true;
        const res = await service({
          url: "/frontend/index/featureList",
          method: "post",
          data: {
            pageNo: this.currentPage,
            pageSize: this.pageSize,
          },
        });
        if (res.code === 200) {
          this.items = res.data.list;
        } else {
          this.$message.error(res.msg || "数据获取失败");
        }
      } catch (error) {
        this.$message.error(error || "数据获取失败");
      } finally {
        this.loading = false;
      }
    },



    handleItemClick(item) {
      console.log("点击了热点事件:", item);
      // this.$router.push({
      //   path: "/HotTopicDetail",
      //   query: {
      //     id: item.hoteventId,
      //   },
      // });
      //    this.homeContainer = document.querySelector(".home");
      // if (!this.homeContainer) return;
      // this.homeContainer.scrollTo({
      //   top: 0,
      //   behavior: "smooth",
      // });
    },
    nextPage() {
      if (this.isTransitioning) return;

      this.isTransitioning = true;
      let nextIndex = this.currentIndex + 4;

      if (nextIndex >= this.items.length) {
        if (this.loop) {
          nextIndex = 0;
        } else {
          nextIndex = Math.max(0, this.items.length - 4);
          this.isTransitioning = false;
          return;
        }
      }

      this.currentIndex = nextIndex;

      setTimeout(() => {
        this.isTransitioning = false;
        this.startAutoPlay();
      }, 500);
    },
    prevPage() {
      if (this.isTransitioning) return;

      this.isTransitioning = true;
      let prevIndex = this.currentIndex - 4;

      if (prevIndex < 0) {
        if (this.loop) {
          prevIndex = Math.max(0, this.items.length - 4);
        } else {
          prevIndex = 0;
          this.isTransitioning = false;
          return;
        }
      }

      this.currentIndex = prevIndex;

      setTimeout(() => {
        this.isTransitioning = false;
        this.startAutoPlay();
      }, 500);
    },
    startAutoPlay() {
      if (
        this.autoPlay &&
        !this.isTransitioning &&
        (this.loop || this.hasNextPage)
      ) {
        this.stopAutoPlay();
        this.interval = setInterval(() => {
          this.nextPage();
        }, this.autoPlayInterval);
      }
    },
    stopAutoPlay() {
      if (this.interval) {
        clearInterval(this.interval);
        this.interval = null;
      }
    },
  },
  mounted() {
 
    this.getHotTopic()
    if (this.items.length < 4 && !this.loop) {
      this.currentIndex = 0;
    }
    this.startAutoPlay();
  },
  beforeDestroy() {
    this.stopAutoPlay();
  },
};
</script>

<style scoped lang="scss">
.items {
  position: relative;
}
.tiem-text {
  font-family: DingTalk, DingTalk;
  font-weight: normal;
  font-size: 36px;
  color: #ffffff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  padding: 0 10px;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.carousel-container {
  position: relative;
  width: 1400px;
  margin: 0 auto;
  overflow: hidden;
}

.carousel-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.carousel-track {
  display: flex;
  flex-direction: row;
  width: auto;
  position: relative;
}

.carousel-item {
  width: 335px;
  margin-right: 20px;
  flex-shrink: 0;
  box-sizing: border-box;
  border: 1px solid #eee;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
}

.item-image {
  width: 100%;
height: 180px;
  object-fit: cover;
    &:hover {
    .item-image {
      transform: scale(1.05);
    }
  }
}

.btn-group {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.prev-btn,
.next-btn {
  width: 24px;
  height: 40px;
  background: #ffffff;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.6;
  transition: background-color 0.3s ease;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}
.prev-btn {
  left: 10px;
}

.next-btn {
  right: 10px;
}

.prev-btn:hover,
.next-btn:hover {
  background-color: #359e75;
}

.prev-btn:disabled,
.next-btn:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}
</style>
